<template>
  <!-- 关联部门 -->
  <a-modal style="top: 10px" :bodyStyle="{ padding: '0', 'max-height': '80vh', 'overflow-y': 'auto' }" :title="title" :width="1200" :maskClosable="false" :visible="visible" @cancel="visible = false" :button_loading="button_loading">
    <a slot="footer">
      <a-button v-if="cancelText" @click="visible = false">{{ cancelText }}</a-button>
      <a-button v-if="okText == '保存'" type="primary" :loading="button_loading" @click="handleSubmit">{{ okText }}</a-button>
      <a-button v-if="okText == '关闭'" type="primary" @click="visible = false">{{ okText }}</a-button>
    </a>

    <a-spin :indicator="indicator" :spinning="spinning" :tip="tip">
      <div class="spin-content">
        <a-table size="small" bordered :rowKey="(record) => record.Id" :columns="columns" :dataSource="infoData" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
          <!-- <span slot="action" slot-scope="text, record">
            <template>
              <a size="small" type="link" @click="handleView(record)">详情</a>
            </template>
          </span> -->
        </a-table>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { GetAssociationDepartmentIDsByProjectID, GetOhterDepartment, SaveAssociationDepartment } from '@/api/project'
export default {
  name: 'Department',
  props: {
    actionType: {
      type: String,
      required: false,
      default: 'add',
    },
  },
  data() {
    return {
      spinning: false,
      visible: false,
      title: '关联部门',
      button_loading: false,
      okText: '保存',
      cancelText: '取消',
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      selectedRowKeys: [],
      infoData: [],
      tip: null,
      columns: [
        {
          title: '部门名称',
          dataIndex: 'DepartmentName',
          key: 'DepartmentName',
          align: 'center',
        },
      ],
      projectData: {},
    }
  },
  methods: {
    view(data) {
      Object.assign(this, {
        spinning: true,
        visible: true,
        title: '关联部门',
        projectData: data,
      })
      GetAssociationDepartmentIDsByProjectID({ projectID: data.id })
        .then((res) => {
          this.selectedRowKeys = res.data
        })
        .finally(() => {
          this.spinning = false
        })
      this.initData(data)
      this.buttonText(this.actionType)
      console.log(this.infoData.projectType)
    },
    initData(data) {
      GetOhterDepartment()
        .then((res) => {
          this.infoData = res.data
        })
        .finally(() => {
          this.spinning = false
        })
    },
    buttonText(actionType) {
      this.okText = '保存'
      this.cancelText = '关闭'
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
      console.log(selectedRowKeys)
    },
    handleSubmit() {
      const param = {
        ProjectID: this.projectData.id,
        DepartmentIDs: this.selectedRowKeys,
      }
      SaveAssociationDepartment(param)
        .then(() => this.$message.success('保存成功!'))
        .finally(() => (this.visible = false))
    },
  },
}
</script>

<style>
</style>